<template>
  <div>
    <van-nav-bar title="确认订单" left-text="返回" left-arrow @click-left="back" />
    <div class="checkList">
      <div class="head">
        <van-cell :title="chosenAddr.title" :label="chosenAddr.label" is-link @click=" $router.push('/address') " />
      </div>
      <van-cell v-for="(item,index) in buyProducts" :key="item.id" :title="item.name" :label="'￥'+item.price"
        :value="item.count + '件'">
        <template slot="icon">
          <span class="custom-title">
            <img class="orderpic" :src="'http://www.mianshiti.top' + item.cover">
          </span>
        </template>
      </van-cell>
    </div>
    <van-submit-bar :price="totalPrice" :disabled="totalPrice == 0" button-text="提交订单" @submit="onSubmit" />
    </van-submit-bar>


    <van-popup v-model="isShow" position="bottom" class="signin-popup">
      <van-nav-bar title="付款">
        <van-icon name="cross" slot="left" @click="cancelPay" />
      </van-nav-bar>

      <van-password-input :value="payPassword" info="密码为 6 位数字" />
      <van-number-keyboard :show="isShow" @input="onInput" @delete="onDelete" />

    </van-popup>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        orderId: 0,
        payPassword: '',
        isShow: false,
        buyProducts: sessionStorage.buyProducts ? JSON.parse(sessionStorage.buyProducts) : []
      }
    },
    computed: {
      chosenAddr() {
        if (this.$store.chosenAddr.name) {
          return {
            title: this.$store.chosenAddr.name + ', ' + this.$store.chosenAddr.mobile,
            label: this.$store.chosenAddr.address
          }
        } else {
          return {
            title: '请选择收货地址',
            label: ''
          }
        }
      },
      totalPrice() {
        let t = 0
        for (let i = 0; i < this.buyProducts.length; i++) {
          t += this.buyProducts[i].price * this.buyProducts[i].count
        }
        return t * 100
      }
    },
    methods: {
      onInput(val) {
        this.payPassword += val
        if (this.payPassword.length == 6 && this.orderId > 0) {
          this.$axios.post(`/order/pay?orderId=${this.orderId}`, {
            pay_password:this.payPassword
          }).then(res => {
            if (res.errcode == 0) {
              this.payPassword = ''
              this.isShow = false
              // this.$Toast(res.data)
              this.$router.push('/paySuccess')
            } else if (res.errcode == 901201) {
              this.$Toast(res.errmsg)
              this.payPassword = ''
            } else {
              this.$router.push('/payFail')
            }
          })
        }
      },
      onDelete() {
        this.payPassword = this.payPassword.substring(0, this.payPassword.length - 1)
        console.log(this.payPassword)

      },
      cancelPay() {
        this.isShow = false
      },
      back() {
        this.$router.back()
      },
      onSubmit() {
        this.$axios.post('/order/create', {
          orderProductList: this.buyProducts,
          user_address_id: this.$store.chosenAddr.id
        }).then(res => {
          if (res.errcode == 0) {
            this.isShow = true
            this.orderId = res.data.id
          }
        })
      }
    },
    mounted() {
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .checkList {
    background-color: #f8f8f8;
    height: calc(100vh - 96px);
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
  }

  .orderpic {
    width: 15vw;
  }

  .van-cell {
    padding: 4px 10px;
  }

  .head {
    margin: 4vw 0;
  }
</style>